<template>
	<view class="content page-bg">
		<div class="header">
			<img :src="userInfo.avatar" class="my-avatar" alt="" srcset="">
			<div class="summary">
				<text class="username">{{userInfo.nickname}}</text>
				<text class="desc">欢迎使用，祝你玩的开心~</text>
			</div>
			<div class="my-info-btn" @click="checkInRoom">刷新</div>
		</div>

		<view class="new-room" v-if="!currentRoom.id">
			<input maxlength="32" placeholder="请填写观看码" v-model="observerCode" class="user-name-input" />
			<button class="contact-btn" @click="joinRoomClick">观看房间</button>
		</view>
		<view class="join-room" v-else>
			<div class="user-avatar-box">
				<button class="user-avatar-btn">
					<image :src="currentRoom.avatar" class="user-avatar" mode="scaleToFill"></image>
				</button>

			</div>
			<div class="user-name-box">

				<text class="user-name-input">{{currentRoom.roomName}}</text>
			</div>
			<div class="btn-box">
				<button class="btn-primary" @click="joinRoomClick">观看已加入房间</button>
				<button class="btn-second" @click="exitRoom">退出已加入房间</button>
			</div>

		</view>

		<div class="app-info">
			<image src="../../static/logo.svg" class="app-logo" mode=""></image>
			<text class="app-tips">本程序仅供娱乐，请勿用于非法活动</text>
			<text class="app-tips">远离赌博，快乐生活</text>
		</div>
	</view>
</template>

<script>
	import {
		updateAvatar,
		updateNickname,
		updateCid
	} from '../../api/user'

	import {
		createRoom,
		checkRoom,
		joinPartnerRoom,
		joinObserverRoom,
		leaveCurrentRoom
	} from '../../api/room'
	export default {
		data() {
			return {
				currentRoom: {
					id: undefined
				},
				observerCode: ""
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			},

		},
		onLoad() {
			this.checkInRoom()
			uni.$on("exitRoom", this.onExitRoom)
		},
		methods: {
			onExitRoom() {
				//为啥直接赋值对象undefined时不会触发更新呢
				this.currentRoom = {
					id: undefined
				}
				this.observerCode = ""
				this.checkInRoom()

			},
			joinRoomClick() {
				var that = this
				if (!this.observerCode) {
					uni.$u.toast('请填写观看码')
					return
				}
				uni.getPushClientId({
					success: (res) => {
						console.log('getPushClientId', res.cid);
						joinObserverRoom({
							cid: res.cid,
							code: that.observerCode,
							source: "web"
						}).then(result => {
							uni.setStorageSync("o_room", result.data)
							uni.navigateTo({
								url: "/pages/room/room"
							})
						})
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			checkInRoom() {
				checkRoom().then(result => {
					console.log("checkInRoom", result)
					if (result.data) {
						this.currentRoom = result.data
						this.observerCode = this.currentRoom.observerCode
					} else {
						this.currentRoom = {
							id: undefined
						}
					}
				})
			},
			exitRoom() {
				var that = this
				uni.showModal({
					content: "确定要离开房间？",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							leaveCurrentRoom().then(result => {
								that.checkInRoom()

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})


			},
		}
	}
</script>

<style scoped lang="scss">
	.content::before {
		content: "";
		clear: both;
		display: table;
	}

	.content {
		// background-color: #f2f2f2;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;

		.header {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 24upx;
			flex-shrink: 0;

			.my-avatar {
				margin-left: 40upx;
				background-color: #fff;
				border-radius: 100%;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
				height: 120upx;
				width: 120upx;
				flex-shrink: 0;
			}

			.summary {
				display: flex;
				flex-direction: column;
				margin-left: 24upx;
				margin-right: 24upx;
				flex-grow: 1;

				.username {
					font-size: 40upx;
					font-weight: bolder;
				}

				.desc {
					font-size: 24upx;
					color: grey;
				}
			}

			.my-info-btn {
				border: 1px solid $uni-color-primary;
				border-radius: 50upx;
				color: $uni-color-primary;
				font-size: 26upx;
				height: 50upx;
				line-height: 50upx;
				text-align: center;
				width: 150upx;
				margin-right: 40upx;
				flex-shrink: 0;
			}
		}

		.new-room {
			margin-left: 40upx;
			margin-right: 40upx;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.user-name-input {
				background-color: #fff;
				border-radius: 12upx;
				box-shadow: 0 5upx 10upx 0 rgba(0, 0, 0, .05);
				font-size: 36upx;
				line-height: 100upx;
				height: 100upx;
				padding-left: 12upx;
				padding-right: 12upx;

			}

			.contact-btn {
				border-radius: 16upx !important;
				font-size: 36upx !important;
				// height: 100upx !important;
				line-height: 100upx !important;

				background-color: $uni-color-primary;
				color: white;
				font-weight: 200;
				width: 100%;
				margin-top: 34upx;
				text-align: center;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		}

		.join-room {
			.user-avatar-box {
				height: auto;
				margin: 20% auto 0;
				width: 100%;
				display: flex;
				justify-content: center;

				.user-avatar-btn {
					border: none;
					background-color: transparent;
					display: block;
					position: relative;
					padding-top: 10upx;
					padding-bottom: 10upx;
				}

				button::after {
					border: none;
				}

				.user-avatar-btn ::after {
					border: 0px solid transparent !important;
				}

				.user-avatar {
					background-color: #fff;
					border-radius: 100%;
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
					height: 200upx;
					overflow: hidden;

					width: 200upx;
					border: 8upx solid #fff;
					position: relative;

				}

				.camera-icon {
					width: 50upx;
					height: 50upx;
					position: absolute;
					bottom: 40upx;
					right: 40upx;
					border-radius: 25upx;
					border: 4upx solid #fff;
					background-color: #fff;
				}
			}

			.user-name-box {
				height: 100upx;

				margin: 0 64upx;
				margin-top: 64upx;
				display: flex;
				justify-content: center;
				align-items: center;

				.user-name-input {

					border-radius: 12upx;
					// box-shadow: 0 5upx 10upx 0 rgba(0, 0, 0, .05);
					font-size: 40upx;
					font-weight: 600;
					height: 100upx;
					line-height: 100upx;
					text-align: center;
				}
			}

			.btn-box {
				display: flex;
				align-items: center;
				margin: 0 40upx;
				margin-top: 80upx;

				.btn-primary {
					border-radius: 16upx !important;
					font-size: 36upx !important;
					// height: 100upx !important;
					line-height: 100upx !important;

					background-color: $uni-color-primary;
					color: white;
					font-weight: 200;
					flex-grow: 1;

				}

				.btn-second {
					border-radius: 16upx !important;
					font-size: 36upx !important;
					// height: 100upx !important;
					line-height: 100upx !important;
					margin-left: 24upx;
					color: black;
					background-color: $uni-color-second;
					font-weight: 200;
				}
			}

		}

		.app-info {
			bottom: 64upx;
			position: absolute;
			text-align: center;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.app-logo {
				height: 60upx;
				margin-bottom: 20upx;
			}

			.app-tips {
				color: #00000050;
				font-size: 24upx;

			}
		}
	}
</style>